<template>
  <div>
    <div class="header">
      <h1>{{ data.title }}</h1>
      <p>发送人：{{ data.sender }}</p>
    </div>
    <div class="line"></div>
    <div class="content">
      <p>
        {{ data.content }}
      </p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters([
      'getNotices'
    ]),
    data(){
      return this.getNotices[this.id];
    },
    id(){
      return this.$route.params.id;
    }
  },
  mounted(){
    let data = this.getNotices;
    data[this.id].isNew = false;
    this.$store.commit('setNotices', data);
  }
}
</script>

<style scoped>
.line{
  width: 100%;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
.header,
.content{
  padding: 5px 10px;
  box-sizing: border-box;
}
</style>
